import React, { useState } from 'react'
// 引入国际化hook: useTranslation
import { useTranslation } from 'react-i18next'
import { Table, Button, ConfigProvider } from 'antd'
import enUS from 'antd/es/locale/en_US'
import zhCN from 'antd/es/locale/zh_CN'
import './App.css'
export default function App() {
  const { t, i18n } = useTranslation(['app'])
  const [locale, setLocale] = useState('zh')

  return (
    // ConfigProvider用来帮我们解决antd内置文本国家化的问题
    // 一般用来包裹整个项目, 必须添加locale属性,值为语言包
    // 当前locale的语言包是什么,则antd内置文本就展示对应的语言
    <ConfigProvider locale={locale === 'zh' ? zhCN : enUS}>
      <div>
        <Button
          onClick={() => {
            i18n.changeLanguage('zh')
            setLocale('zh')
          }}
        >
          中文
        </Button>
        <Button
          onClick={() => {
            i18n.changeLanguage('en')
            setLocale('en')
          }}
        >
          English
        </Button>
      </div>
      <h1>{t('helo')}</h1>
      <Table
        columns={[
          {
            title: t('index') as string,
            render(a: any, b: any, index: number) {
              return index + 1
            },
          },
          {
            title: t('name') as string,
            dataIndex: 'name',
          },
        ]}
        dataSource={[
          {
            id: 1,
            name: 'zs',
          },
          {
            id: 2,
            name: 'ls',
          },
        ]}
        rowKey="id"
        pagination={{
          total: 60,
          showSizeChanger: true,
          showQuickJumper: true,
        }}
      ></Table>
    </ConfigProvider>
  )
}
